<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证邮编和手机号码</title>
    <style type="text/css">
        body {
            line-height: 25px;
        }

        input {
            width: 120px;
            height: 16px;
        }

        div {
            color: #F00;
            font-size: 12px;
            display: inline-block;
            padding-left: 5px;;
        }
        ul,li{list-style: none;}
    </style>

</head>

<body>
<ul>
    <li>邮政编码：<input id="code" type="text" /><div id="divCode"></div></li>
    <li>手机号码：<input id="mobile" type="text"  /><div id="divMobile"></div></li>
</ul>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(document).ready(function(){
            $("#code").blur(function(){
                var code = $(this).val();
                var $codeId = $("#divCode");
                var regCode = /^\d{6}$/;
                if (regCode.test(code) == false) {
                    $codeId.html("邮政编码不正确，请重新输入");
                    return false;
                }
                $codeId.html("");
                return true;
            });

            $("#mobile").blur(function(){
                var mobile = $(this).val();
                var $mobileId = $("#divMobile");
                var regMobile = /^1\d{10}$/;
                if (regMobile.test(mobile) == false) {
                    $mobileId.html("手机号码不正确，请重新输入");
                    return false;
                }
               $mobileId.html("");
                return true;
            })
        })
    </script>
</body>
</html>
